import Api from '@/api/index';
import Rules from '@/rules';
import { areaList } from '@vant/area-data';
import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Area, Button, Field, Form, NavBar, Notify, Picker, Popup, Radio, Uploader } from 'react-vant';

const Card = () => {
    let navigate = useNavigate()
    const [show, setShow] = useState()
    const [card, setCard] = useState({})
    const [type, setType] = useState([])
    const [TypeShow, setTypeShow] = useState()
    const [form] = Form.useForm()
    useEffect(() => {
        TypeList()
        async function Card() {
            let result = await Api.ApiCard({ userid: React.$LoginUser.id })
            let info = {}
            let code = null
            if (result.data && result.code === 1) {
                let data = result.data
                info = {
                    cardid: data.id,
                    userid: data.id,
                    nickname: data.nickname,
                    mobile: data.mobile,
                    email: data.email,
                    sex: data.sex,
                    content: data.content,
                    region_text: data.region_text,
                    type_text: data.type.name,
                    typeid: data.typeid,
                }

                if (data.province) {
                    code = data.province.toString()
                }
                if (data.city) {
                    code = data.city.toString()
                }
                if (data.district) {
                    code = data.district.toString()
                }
                info.code = code
                if (data.avatar) {
                    info.avatar = [
                        {
                            url: data.avatar_cdn,
                            status: 'done',
                            name: 'avatar',
                        }
                    ]
                }
            } else {
                info = {
                    cardid: 0,
                    userid: React.$LoginUser.id,
                    nickname: React.$LoginUser.nickname,
                    mobile: '',
                    email: React.$LoginUser.email,
                    sex: React.$LoginUser.sex,
                    content: React.$LoginUser.content,
                    region_text: React.$LoginUser.region_text,
                    type_text: '',
                    typeid: 0,
                    price: ''
                }
                if (React.$LoginUser.province) {
                    code = React.$LoginUser.province.toString()
                }
                if (React.$LoginUser.city) {
                    code = React.$LoginUser.city.toString()
                }
                if (React.$LoginUser.district) {
                    code = React.$LoginUser.district.toString()
                }
                info.code = code
                if (React.$LoginUser.avatar) {
                    info.avatar = [
                        {
                            url: React.$LoginUser.avatar,
                            status: 'done',
                            name: 'avatar',
                        }
                    ]
                }
            }
            setCard(info)
            form.setFieldsValue(info)
        }
        Card()
    }, [form])

    // 请求当前登录用户数据
    // const Card = async () => {
    //     let result = await Api.ApiCard({ userid: React.$LoginUser.id })
    //     let info = {}
    //     let code = null
    //     if (result.data && result.code === 1) {
    //         let data = result.data
    //         info = {
    //             cardid: data.id,
    //             userid: data.id,
    //             nickname: data.nickname,
    //             mobile: data.mobile,
    //             email: data.email,
    //             sex: data.sex,
    //             content: data.content,
    //             region_text: data.region_text,
    //             type_text: data.type.name,
    //             typeid: data.typeid,
    //         }

    //         if (data.province) {
    //             code = data.province.toString()
    //         }
    //         if (data.city) {
    //             code = data.city.toString()
    //         }
    //         if (data.district) {
    //             code = data.district.toString()
    //         }
    //         info.code = code
    //         if (data.avatar) {
    //             info.avatar = [
    //                 {
    //                     url: data.avatar_cdn,
    //                     status: 'done',
    //                     name: 'avatar',
    //                 }
    //             ]
    //         }
    //     } else {
    //         info = {
    //             cardid: 0,
    //             userid: React.$LoginUser.id,
    //             nickname: React.$LoginUser.nickname,
    //             mobile: '',
    //             email: React.$LoginUser.email,
    //             sex: React.$LoginUser.sex,
    //             content: React.$LoginUser.content,
    //             region_text: React.$LoginUser.region_text,
    //             type_text: '',
    //             typeid: 0,
    //             price: ''
    //         }
    //         if (React.$LoginUser.province) {
    //             code = React.$LoginUser.province.toString()
    //         }
    //         if (React.$LoginUser.city) {
    //             code = React.$LoginUser.city.toString()
    //         }
    //         if (React.$LoginUser.district) {
    //             code = React.$LoginUser.district.toString()
    //         }
    //         info.code = code
    //         if (React.$LoginUser.avatar) {
    //             info.avatar = [
    //                 {
    //                     url: React.$LoginUser.avatar,
    //                     status: 'done',
    //                     name: 'avatar',
    //                 }
    //             ]
    //         }
    //     }
    //     setCard(info)
    //     form.setFieldsValue(info)
    // }

    // 请求行业分类数据
    const TypeList = async () => {
        let result = await Api.ApiCardType()
        if (result.data && result.data.length > 0) {
            setType(result.data)
        } else {
            setType([{
                id: 0,
                name: '暂无数据'
            }])
        }
    }

    // 选择地区的方法
    const SelectRegion = (values) => {

        setShow(false)
        let [province, city, district] = values
        let code = null
        let region_text = ''
        if (province) {
            code = province.code
            region_text += province.name + '-'
        }
        if (city) {
            code = city.code
            region_text += city.name + '-'
        }
        if (district) {
            code = district.code
            region_text += district.name
        }
        let info = card
        info.code = code
        info.region_text = region_text
        setCard(info)
    }

    const onSubmit = async (form) => {
        let data = {
            cardid: card.cardid,
            userid: React.$LoginUser.id,
            nickname: form.nickname,
            email: form.email,
            mobile: form.mobile,
            sex: form.sex,
            content: form.content,
            typeid: card.typeid,
            code: card.code
        }

        if (form.avatar[0] && form.avatar[0].file) {
            data.avatar = form.avatar[0].file
        }
        let result = await Api.ApiCardAdd(data)
        if (result.code === 0) {
            Notify.show({
                type: 'danger',
                message: result.msg
            })
            return false
        } else {
            Notify.show({
                type: 'success',
                message: result.msg,
                onClose: () => {
                    navigate('/')
                }
            })
        }
    }

    const SelectType = (item) => {
        setTypeShow(false)
        let info = card
        info.typeid = item.id
        info.type_text = item.name
        setCard(info)
    }

    const Footer = () => {
        return (
            <div className="action">
                <Button className="btn" nativeType='submit'>提交</Button>
            </div>
        )
    }

    return (
        <>
            {/* 导航 */}
            <NavBar
                title="生成名片"
                leftText="返回"
                onClickLeft={() => navigate('/user/base/index')}
            />
            <Form
                className="profile wow fadeInUp"
                data-wow-delay="200ms"
                footer={<Footer />}
                form={form}
                onFinish={onSubmit}
            >
                {/* 昵称 */}
                <Form.Item
                    labelWidth='4.5em'
                    labelAlign='right'
                    name="nickname"
                    label="昵称"
                    initialValue={card.nickname}
                    rules={Rules.nickname}
                >
                    <Field placeholder="请输入昵称" />
                </Form.Item>

                {/* 邮箱 */}
                <Form.Item
                    labelWidth='4.5em'
                    labelAlign='right'
                    name="email"
                    label="邮箱"
                    initialValue={card.email}
                    rules={Rules.email}
                >
                    <Field placeholder="请输入邮箱" />
                </Form.Item>

                {/* 手机号 */}
                <Form.Item
                    labelWidth='4.5em'
                    labelAlign='right'
                    name="mobile"
                    label="手机号码"
                    rules={Rules.mobile}
                >
                    <Field maxlength="11" placeholder="请输入手机号码" />
                </Form.Item>

                {/* 性别 */}
                <Form.Item
                    name="sex"
                    label="性别"
                    labelWidth='4.5em'
                    labelAlign='right'
                    rules={Rules.sex}
                >
                    <Radio.Group direction="horizontal" >
                        <Radio name="0">保密</Radio>
                        <Radio name="1">男</Radio>
                        <Radio name="2">女</Radio>
                    </Radio.Group>
                </Form.Item>

                {/* 城市地区 */}
                <Form.Item
                    label="地区"
                    initialValue={card.region_text}
                    onClick={() => setShow(true)}
                    labelWidth='4.5em'
                    labelAlign='right'
                    rules={Rules.region_text}
                >
                    {card.region_text ? card.region_text : '请选择所属地区'}
                </Form.Item>

                {/* 所属行业 */}
                <Form.Item
                    label="所属行业"
                    initialValue={card.type_text}
                    onClick={() => setTypeShow(true)}
                    rules={Rules.type_text}
                    labelWidth='4.5em'
                    labelAlign='right'
                >
                    {card.type_text ? card.type_text : '请选择所属行业'}
                </Form.Item>

                {/* 个人头像 */}
                <Form.Item
                    name="avatar"
                    label="头像"
                    initialValue={card.avatar}
                    labelWidth='4.5em'
                    labelAlign='right'
                >
                    <Uploader maxCount="1" />
                </Form.Item>

                {/* 个人简介 */}
                <Form.Item
                    name="content"
                    label="个人简介"
                    initialValue=""
                    labelWidth='4.5em'
                    labelAlign='right'
                >
                    <Field type="textarea" placeholder="请输入个人简介" maxlength={200} showWordLimit rows={2} />
                </Form.Item>
            </Form>

            <Popup
                position="bottom"
                visible={show}
                onClose={() => { setShow(false) }}
            >
                <Area
                    title="选择地区"
                    value={card.code}
                    areaList={areaList}
                    onConfirm={SelectRegion}
                    onCancel={() => setShow(false)}
                />
            </Popup>

            {/* 行业弹出层 */}
            <Popup
                position="bottom"
                visible={TypeShow}
                onClose={() => setTypeShow(false)}
            >
                <Picker
                    title="所属行业"
                    columnsFieldNames={{
                        text: 'name',
                    }}
                    columns={type}
                    onCancel={() => { setTypeShow(false) }}
                    onConfirm={SelectType}
                />
            </Popup>
        </>
    )
}

export default Card